@import '@/app/styles/variables';

.block {
  all: unset;
  cursor: pointer;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 8px;

  &:hover {
    cursor: pointer;

    & > .cover > img {
      transform: scale(1.1);
    }

    & > .title {
      color: #337cec;
    }
  }
}

.cover {
  overflow: hidden;
  border-radius: 24px;
  border: 0;
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  flex-shrink: 0;
  background: #f3f3f3;
  isolation: isolate;
  @include aspect(1, 1);
  img {
    transition: 0.1s all ease-in;
    @include aspect(1, 1);
    border-radius: inherit;
    isolation: isolate;
  }
}

.title {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;

  white-space: pre-line;

  text-decoration: none;
  color: #000;
}

.price {
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;

  display: flex;
  align-items: center;
  gap: 8px;
}

.oldPrice {
  color: #ababab;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  text-decoration-line: line-through;
}

@include media-min(sm) {
  .block {
    max-width: initial;
  }

  .title {
    font-size: 14px;
    line-height: 20px;
  }

  .price {
    font-size: 16px;
    line-height: 22px;
  }

  .oldPrice {
    font-size: 16px;
    line-height: 22px;
  }
}

@include media-min(md) {
  .block {
    gap: 12px;
  }

  .title {
    font-size: 20px;
    line-height: 26px;
  }

  .price {
    font-size: 24px;
    line-height: 30px;
  }
}

@include media-min(xl) {
  .cover {
    padding: 50.53px 50.38px 51.23px 51.38px;

    & > img {
      width: initial;
      height: initial;
    }
  }
}

@include media(sm) {
  .cover {
    border-radius: 16px;
  }
}
